<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="证照信息" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="organizationBox">
			<view class="itemBox">
				<text class="titleOne">三合一证件照/营业执照</text>
			</view>
			<view class="itemBox">
				<view class="businessLicense">
					<image src="../../../static/image/WechatIMG201.jpeg"></image>
				</view>
			</view>
			<view class="itemBox">
				<text class="title">注册地区</text>
				<text class="info">浙江省温州市瑞安市</text>
			</view>
			<view class="itemBox">
				<text class="title">营业执照名称</text>
				<text class="info">瑞安加叻服饰经营部</text>
			</view>
			<view class="itemBox">
				<text class="title">企业地址</text>
				<text class="info">浙江省温州市瑞安市飞云街道马道社区大桥路91号 (夹层)</text>
			</view>
			<view class="itemBox">
				<text class="title">社会统一信用代码</text>
				<text class="info">92330381MACRJ6FC7N</text>
			</view>
			<view class="itemBox">
				<text class="title">有效期开始</text>
				<text class="info">2023-01-01</text>
			</view>
			<view class="itemBox">
				<text class="title">有效期结束</text>
				<text class="info">20990-12-31</text>
			</view>
			<view class="itemBox">
				<text class="title">经营范围</text>
			</view>
			<view class="itemBox">
				<view class="businessScope">
					<text>一般项目:服装服饰零售:服装服饰批发 (除依法须经批准的项目外，凭营业执照依法自主开展经营活动)。</text>
				</view>
			</view>
		</view>
		<view class="legalPerson">
			<view class="itemBox">
				<text class="titleOne">法人身份证</text>
			</view>
			<view class="itemBox">
				<view class="identityCard">
					<view class="frontOfCertificate">
						<text class="titleTwo">人像面</text>
						<text class="tipsTwo">您的身份证人像面</text>
						<image src="../../../static/images/sfzzm.png"></image>
					</view>
					<view class="backOfCertificate">
						<text class="titleTwo">国徽面</text>
						<text class="tipsTwo">您的身份证国徽面</text>
						<image src="../../../static/images/sfzfm.png"></image>
					</view>
				</view>
			</view>
			<view class="itemBox">
				<text class="title">法人姓名</text>
				<text class="info">潘高其</text>
			</view>
			<view class="itemBox">
				<text class="title">身份证号</text>
				<text class="info">330325197605033334</text>
			</view>
			<view class="itemBox">
				<text class="title">身份证起效期</text>
				<text class="info">2007-11-15</text>
			</view>
			<view class="itemBox">
				<text class="title">身份证到期日</text>
				<text class="info">2027-11-15</text>
			</view>
			<view class="itemBox">
				<text class="title">手机号</text>
				<text class="info">17357706169</text>
			</view>
			<view class="itemBox">
				<text class="title">身份证住址</text>
				<text class="info">浙江省瑞安市飞云镇振兴街104</text>
			</view>
		</view>
		<view class="settlement">
			<view class="itemBox">
				<text class="titleOne">结算信息</text>
			</view>
			<view class="itemBox">
				<view class="radioBox">
					<text 
						:class="{radioCheck : radioActive == 0}"
						@click="radioCheck(0)"
					>法人银行卡</text>
					<text 
						:class="{radioCheck : radioActive == 1}"
						@click="radioCheck(1)"
					>企业对公账号</text>
				</view>
			</view>
			<!--个人银行卡-->
			<view class="personage" v-show="radioActive == 0">
				<view class="bankCard">
					<view class="bankCardFront">
						<text class="titleTwo">银行卡正面</text>
						<text class="tipsTwo">您的银行卡正面</text>
						<image src="../../../static/images/yhkzm.png"></image>
					</view>
					<view class="bankCardReverse">
						<text class="titleTwo">银行卡反面</text>
						<text class="tipsTwo">您的银行卡反面</text>
						<image src="../../../static/images/yhkfm.png"></image>
					</view>
				</view>
				<view class="itemBox">
					<text class="title">持卡人姓名</text>
					<text class="info">潘高其</text>
				</view>
				<view class="itemBox">
					<text class="title">卡号</text>
					<text class="info">6228480338314598479</text>
				</view>
				<view class="itemBox">
					<text class="title">所属银行</text>
					<text class="info">中国农业银行</text>
				</view>
				<view class="itemBox">
					<text class="title">银行所在地</text>
					<text class="info">浙江省温州市瑞安市</text>
				</view>
				<view class="itemBox">
					<text class="title">开户行</text>
					<text class="info">中国农业银行</text>
				</view>
				<view class="itemBox">
					<text class="title">银行卡预留手机号</text>
					<text class="info">17357706169</text>
				</view>
			</view>
			<!--企业对公账号-->
			<view class="forCorporate" v-show="radioActive == 1">
				<view class="itemBox">
					<view class="corporateAccount">
						<image src="../../../static/images/sc.png"></image>
					</view>
				</view>
				<view class="itemBox">
					<text class="title">账户名称</text>
					<text class="info">杭州加叻网络科技有限公司</text>
				</view>
				<view class="itemBox">
					<text class="title">账户号码</text>
					<text class="info">6228480338314598479</text>
				</view>
				<view class="itemBox">
					<text class="title">所属银行</text>
					<text class="info">中国农业银行</text>
				</view>
				<view class="itemBox">
					<text class="title">银行所在地</text>
					<text class="info">浙江省温州市瑞安市</text>
				</view>
				<view class="itemBox">
					<text class="title">开户行</text>
					<text class="info">中国农业银行</text>
				</view>
				<view class="itemBox">
					<text class="title">银行卡预留手机号</text>
					<text class="info">17357706169</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				radioActive:0
			}
		},
		methods:{
			radioCheck(type)
			{
				if(this.radioActive == type) return;
				this.radioActive = type;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.organizationBox,.legalPerson,.settlement{
		width: 100%;
		height: auto;
		float: left;
		background-color: #fff;
		margin-top: 20rpx;
		.personage{
			width: 100%;
			height: auto;
			float: left;
			.bankCard{
				width: 90%;
				height: auto;
				float: left;
				margin-left: 5%;
			}
			.bankCardFront,.bankCardReverse{
				width: 100%;
				float: left;
				height: 280rpx;
				background-color: #f7f8fa;
				border-radius: 15rpx;
				.titleTwo{
					width: 48%;
					margin-top: 15rpx;
					height: 50rpx;
					margin-left: 3%;
					float: left;
					line-height: 50rpx;
					font-size: 34rpx;
					font-weight: bold;
					color: #333;
				}
				.tipsTwo{
					width: 48%;
					height: 30rpx;
					margin-left: 3%;
					float: left;
					line-height: 30rpx;
					font-size: 26rpx;
					font-weight: bold;
					color: #8a8a8a;
					font-weight: 300;
					margin-top: 5rpx;
				}
				image{
					width: 50%;
					height: 240rpx;
					float: right;
					margin-top: 20rpx;
					position: absolute;
					right: 8%;
				}
			}
			.bankCardReverse{
				margin-top: 20rpx;
			}
		}
		.itemBox{
			width: 90%;
			float: left;
			min-height: 95rpx;
			height: auto;
			margin-left: 5%;
			border-bottom: 1rpx solid #f8f8f8;
			display: flex;
			align-items: center;
			.titleOne{
				width: auto;
				float: left;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			.title{
				width: auto;
				float: left;
				font-size: 28rpx;
				color: #333;
			}
			.info{
				float: right;
				text-align: right;
				font-size: 28rpx;
				padding: 30rpx 0rpx;
				margin-left: 20%;
				flex: 1;
				color: #454545;
			}
			.businessLicense,.corporateAccount{
				width: 100%;
				height: 400rpx;
				background-color: #f7f8fa;
				float: left;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 80%;
					height: 85%;
				}
			}
			.businessScope{
				width: 100%;
				height: auto;
				background-color: #f7f8fa;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				margin-bottom: 30rpx;
				text{
					width: 90%;
					font-size: 26rpx;
					margin: 25rpx 0rpx;
					color: rgb(150, 150, 150);
				}
			}
			.identityCard{
				width: 100%;
				height: auto;
				float: left;
				.frontOfCertificate,.backOfCertificate{
					width: 100%;
					height: 280rpx;
					background-color: #f7f8fa;
					border-radius: 15rpx;
					.titleTwo{
						width: 48%;
						margin-top: 15rpx;
						height: 50rpx;
						margin-left: 3%;
						float: left;
						line-height: 50rpx;
						font-size: 34rpx;
						font-weight: bold;
						color: #333;
					}
					.tipsTwo{
						width: 48%;
						height: 30rpx;
						margin-left: 3%;
						float: left;
						line-height: 30rpx;
						font-size: 26rpx;
						font-weight: bold;
						color: #8a8a8a;
						font-weight: 300;
						margin-top: 5rpx;
					}
					image{
						width: 50%;
						height: 240rpx;
						float: right;
						margin-top: 20rpx;
						position: absolute;
						right: 8%;
					}
				}
				.backOfCertificate{
					margin-top: 20rpx;
				}
			}
			.radioBox{
				width: 100%;
				height: 90rpx;
				float: left;
				display: grid;
				grid-template-columns: repeat(2,1fr);
				text{
					margin: 10rpx;
					width: calc(100% - 20rpx);
					height: 70rpx;
					background-color: #cecece;
					line-height: 70rpx;
					text-align: center;
					color: #fff;
					border-radius: 8rpx;
					font-size: 28rpx;
				}
				.radioCheck{
					background-color: #f9bb34;
					color: #fff;
				}
			}
			
		}
		.itemBox:last-child{
			border-bottom-width: 0rpx;
		}
	}
	.settlement{
		padding-bottom:30rpx;
	}
</style>